<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="public/introduceCss :: CSS(~{::title})">
    <title>歌德交易</title>
</head>

<body>
<!-- 导航栏 -->
<nav th:insert="~{public/guide :: head}"></nav>
<!-- 主页大背景图 -->
<section id="hero" class="d-flex align-items-center">
    <div class="container text-center position-relative" data-aos="fade-in" data-aos-delay="200">
        <h1>合肥大学-歌德二手交易平台</h1>
        <h2>一个可以让你赚钱的网站</h2>
        <a href="/SellGoods" class="btn-get-started scrollto">立即卖商品,二手换成钱</a>
    </div>
</section>
<!-- 主页-我们的优势 -->
<section id="counts" class="counts">
    <h3 style="text-align: center;text-shadow: 2px 2px rgb(75, 75, 75);">我们的优势</h3>
    <div class="container">
        <div class="row counters">
            <div class="col-lg-3 col-6 text-center">
                <span>免押金</span>
                <p>无需购置 降低成本</p>
            </div>
            <div class="col-lg-3 col-6 text-center">
                <span>性价比高</span>
                <p>优选机器 品质保障</p>
            </div>
            <div class="col-lg-3 col-6 text-center">
                <span>随租随还</span>
                <p>按天起租 分期付费</p>
            </div>
            <div class="col-lg-3 col-6 text-center">
                <span>一台起租</span>
                <p>免押额度 轻松租赁</p>
            </div>
        </div>

    </div>
</section>
<main id="main">
    <!-- 二手商品动态处 -->
    <section id="portfolio" class="portfolio">
        <div class="container">
            <div class="section-title" data-aos="fade-left">
                <h2>二手产品</h2>
                <p>一手交钱一手交货! 靠谱!</p>
            </div>
            <div class="row" data-aos="fade-up" data-aos-delay="100">
                <div class="col-lg-12 d-flex justify-content-center">
                    <a class="agodz" href="/#main">全部产品</a>
                    <a class="agodz" th:each="categories:${Categories}"
                       th:href="'/index2?type='+${categories.getCId()}+'#main'"
                       th:text="${categories.getCName()}"></a>
                    <form action="/index3#main" method="post" class="input">
                        <label>
                            <input type="text" placeholder="请输入商品名称" name="text">
                        </label>
                        <input type="submit" value="搜索">
                    </form>
                </div>
            </div>
            <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">

                <div class="col-lg-4 col-md-6 portfolio-item" th:each="goods:${Goods}">
                    <a th:href="'/Produce?gid='+${goods.getGid()}" th:title="${goods.getGName()}">
                        <div class="portfolio-wrap">
                            <img th:src="${goods.getGImg1()}" class="img-fluid imgpx" alt="">
                            <div class="portfolio-info">
                                <h4 th:text="${goods.getGName()}"></h4>
                                <p th:text="${goods.getGDetails()}"
                                   style="width: 100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"></p>
                                <div class="portfolio-links">
                                    <i class="bx bx-plus">购买它</i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="yeshu">
                <div>当前是第[[${pageNow}]]页,总共有[[${pageAll}]]页</div>
                <a th:href="'/index?pageNow='+(${pageNow}-1)+'#main'" th:if="${pageNow} ne 1">上一页</a>
                <a th:href="'/index?pageNow='+(${pageNow}+1)+'#main'" th:if="${pageNow} lt ${pageAll}">下一页</a>
            </div>
        </div>
    </section>
</main>

<!-- 赞助商 -->
<nav th:insert="~{public/rump :: sponsor}"></nav>
<!-- 页尾-->
<nav th:insert="~{public/rump :: foot}"></nav>
<!-- 一键回顶 -->
<nav th:insert="~{public/rump :: backTop}"></nav>
<!-- 公共的JS文件 -->
<nav th:insert="~{public/publicJs :: JS}"></nav>
</body>

</html>